<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .big{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        border: 1px solid pink;
    }
        .big div{
            display: inline-block;
            vertical-align: middle;
            height: 30px;
            width: 30px;
            background-color: black;

        }
        p{
            color: pink;
            *color:blue;
            _color:mediumspringgreen;
        }
    </style>
</head>
<body>
<!--<div class='big'>-->
<!--<div></div>-->
<!--</div>-->
<!--怎么让一个必定宽高的div,垂直水平居中？-->
        <!--父盒子设置   display:table-cell; text-align:center;vertical-align:middle;-->
        <!--子盒子设置   display:inline-block; vertial-align:middle;-->
    <!--使用css3transform：-->
        <!--父盒子设置display：relative-->
        <!--子盒子设置   transform：translate（-50%，-50%）；position:absolute:top50%-->
<!--position的属性的作用-->
    <!--position 的常见属性值    relative    absolute     fixed  static-->
    <!--relative  相对定位   位置的偏移相对于原始位置    处于标准流内    占位置-->
    <!--absolute   绝对定位   有父盒子的话    位置偏移相对于父盒子  没有父盒子-->
          <!--不占位置 脱离标准流-->
    <!--static  默认位置  始终处于页面给的位置    一般不常用   在标准流内-->
    <!--fixed  固定定位    位置的偏移相对于整个body    不会随鼠标的滚轮-->
          <!--事件而改变  且脱离标准流-->
<!--px em rem的区别？-->
    <!--px像素   是一个绝对单位    像素的大小是相对于屏幕的分辨率来说-->
    <!--em   是一个相对单位   相对于当前文字设置的字体尺寸   如当前的行内字体大小未被设置-->
            <!--默认以浏览器字体大小为标准   同时会继承父元素的字体大小 不是绝对的字体大小-->
    <!--rem  是css3里面新增的相对单位   不是绝对的字体单位   相对于html设置的跟字体大小-->
    <!--区别是： ie无法调整 使用px作为单位的字体大小   em和rem 就可以调整   rem相对于em又-->
            <!--完美了一点  可以通过修改根字体从而修改所有字体的大小  又可以避免字体大小-->
            <!--逐层复合带来的连锁反应  ie8以上的浏览器都没有兼容问题-->
<!--表格的自动换行是怎么实现的？-->
    <!--word-break:normal使用浏览器的自动换行-->
    <!--break-all: 单词内换行-->
    <!--keep-wrap:normal  只能在半角空格或连字符处换行-->
        <!--break-word在长单词或者统一资源定位器地址内部进行换行-->
<!--box-sizing  transiton   translate  分别是什么？-->
    <!--boxsizing 是用来指定盒模型的大小的计算方式 主要分为border-box   从边框开始计算-->
     <!--content-box 从盒子的内容规定那个盒子的大小-->
    <!--transition   过度属性    通过设置transition-propety 设置过都需要的属性-->
    <!--transition-duration 过渡时间     transition-timing-function 过度速度-->
    <!--transition-delay  过度延迟   translate 通过移动改变元素的位置    有xyz三个属性-->
<!--选择器优先级-->
    <!--！improtant  行内样式    id选择器   标签选择器   通配符   继承-->
<!--权重的算法-->
    <!--一  important个数   二id选择器的个数   三 类选择器的个数  四 标签选择器的个数-->
     <!--从左往右依次比较  谁大谁重要-->
<!--css3选择器有那些？-->
    <!--属性选择器   伪类选择器   伪元素选择器-->
<!--css3新的特性有那些？-->
    <!--文字阴影   盒子阴影  背景颜色    边框圆角    过度   自定义动画   渐变   broder-img-->
    <!--2d转换  3d转换    媒体查询 多栏布局-->
<!--xhtml和html的区别？-->
    <!--html是一种基本的web网页设计语言    Xhtml是一种基于xml的置标语言-->
    <!--不同点在于   xhtml元素必须被正确的镶嵌-->
                <!--xhtml元素必须被关闭-->
                <!--标签名必须是小写-->
                <!--xhtml文档必须拥有根元素-->
<!--css 的 引入方式有那些？-->
    <!--内联 内嵌   外链  导入-->
    <!--区别是同时加载   前者没有兼容性   后者在css2.1下不支持-->
    <!--link 支持使用javascript 改变样式  后者不可以-->
<!--标签上的title 于alt属性有什么不同-->
    <!--alt当图片不显示的时候 用文字代替   title为该属性提供信息-->
<!--描述一下css rest 的之一用和用途？-->
    <!--rest重置浏览器的默认属性   浏览器的不同  样式不同 重置可以让他们统一-->
<!--解释css sprites 如何使用-->
    <!--css精灵图    把一堆小图片整合到一张大的图片上   减轻服务器对图片的请求数量-->
<!--清除浮动的几种方式？-->
    <!--1父级div定义高度 height 原理 是父级div手动定义高度  就解决了父级div无法-->
        <!--获得高度的问题  简单   代码少  只适高度固定的布局-->
    <!--2 结尾处加空div标签   clear:both  原理是   在浮动元素的后面添加空的div兄弟元素-->
        <!--利用css提高clear :both清楚浮动  让父级元素自动获取到告诉   如果页面、-->
        <!--浮动布局多 就要加很多空的div让人感觉很不好-->
     <!--3 父级div 定义伪类after  和zoom-->
        <!--.clearfix：after{-->
            <!--content:"";   display:block   visibility:hidden  height:0-->
             <!--line-height :0    clear :both}-->
<!--.clearfix{zoom:1}-->
            <!--原理ie8和其他浏览器才支持after 原理和方法2有点类似   zoom-->
             <!--解决ie6   ie7 的浮动问题-->
     <!--4 父级div定义 overflow  hidden-->
     <!--5 双为元素法-->
        <!--。clearfix： before，clearfix :after{-->
            <!--content :"";-->
            <!--clear :both ;-->
            <!--}-->
        <!--.clear fix{-->
        <!--zoom:1-->
        <!--}-->
<!--如何简述一下如何使一套设计方案   适应不同的分辨率  有哪些方法可以实现？-->
  <!--流式布局   ：  使用非固定像素来定义网页内容   也就是百分比布局  通过盒子的-->
            <!--款苏设置成百分比来根据屏幕的宽度来进行伸缩  不受固定像素的限制-->
            <!--内容向两边填充   是移动web开发的常用布局方式  可使用于移动端的-->
            <!--不同分辨率设备   记得  img的宽度在设置时要除以2-->
  <!--响应式开发 ： 就是一个网站兼容多个终端    主要是通过媒介查询来实现-->
            <!--通过查询screen的宽度来指定某个宽度区间的网页布局-->
            <!--超小屏幕  768px以下   小屏幕是768- 992px   中等屏幕是 992-1200px-->
            <!--宽屏  1200px以上-->
            <!--响应式布局的  开发显得繁琐一些   一般使用第三方响应式框架来完成-->
            <!--响应式布局和普通的web移动开发 pc端的开发有什么区别  ？-->
                <!--前者针对性更强 代码结构更为简单 加载快   针对已经有pc端的-->
                <!--网站 只需要单独开发移动端-->
                <!--后者适合一些新建的网站  使用各个终端   灵活  但代码复杂加载慢-->
<!--描述一下渐进增强和优雅降级的不同？-->
    <!--优雅降级和渐进增强是随着css3流出来的一个概念  由于低级的浏览器不支持css3-->
    <!--但css3效果有比较优秀   所以在高级浏览器中使用css3而低级浏览器只保证最基本的-->
    <!--功能的实现  渐进增强是  先实现最基本的功能后 再不影响功能的实现的同时-->
    <!--是页面能更加美观  优雅降级  是先考虑页面的美观度   再来考虑各种不兼容性-->
    <!--优雅降级的观念是针对高版本浏览器来说设计-->
    <!--渐进增强是关注与内容本身-->
<!--改变元素的外边距用的是什么属性？  改变元素的填充属性用的是什么属性？-->
    <!--外边距  magin   内边距  padding-->
<!--在新窗口中打开链接的方法是？-->
    <!--target- ——blank-->
<!--合理的布局中常常听说过与表现放哪里  那么结构是什么？  表现是什么？-->
<!--结构是html   表现是css-->
<!--简述对web语义化的理解？-->
    <!--就是让浏览器更好的读懂你的代码 在进行html结构  表现  行为设计时  尽量的-->
    <!--使用语义化的标签  使代码简洁明了易于进行web操作和网站seo  方便团队协奏-->
    <!--的一种标准   以图实现一种  “ 无障碍的web开发”-->
<!--每个html里面都有一个很重要的东西   Doctype  知道这是干什么的吗？-->
    <!--docype是一种标准通用标记语言的文档类型声明  目的是要告诉标准通用语言-->
    <!--解析器  他应该使用什么样的文档类型来定义解析文档   只有确定了一个正确的-->
    <!--文档类型   超文本标记语言或者可扩展超文本语言标记语言中的标签和层叠样式-->
    <!--表才能生效    甚至对javascript脚本都会有所影响-->
<!--css都有哪些选择器    css选择器的优先级是怎样定义的？-->
    <!--一般而言   选择器越特殊  优先级越高-->
    <!--!important  行内样式   类  标签 伪类  属性 伪对象 继承-->
        <!--通配符-->
<!--display none   visibility  hidden 的区别是什么？-->
    <!--display  none使用该属性以后html元素的宽高就会丢失   -->
    <!--visibility  hidden 使用该属性以后html元素仅仅是在-->
    <!--视觉上看不见  完全看不见  但还是占位置   具有宽高-->
    <!--等属性值-->
<!--<p>GFHDSJAK</p>-->
































</body>
</html>